<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>喜酒首页</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/page_2.css"/>
		<link rel="stylesheet" type="text/css" href="css/gao.css" />
		<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值&plugin=AMap.AdvancedInfoWindow"></script>
		<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
		<style type="text/css">
			.info-title {
				color: white;
				font-size: 14px;
				background-color: blue;
				line-height: 26px;
				padding: 0px 0 0 6px;
				font-weight: lighter;
				letter-spacing: 1px;
			}
			
			.info-content {
				font: 12px Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial;
				padding: 4px;
				color: #666666;
				line-height: 23px;
			}
			
			.info-content img {
				float: left;
				margin: 3px;
			}
		</style>

	</head>

	<body>
		<div class="index_web">
			<!--*************** 页面一 *******************-->
			<div class="content1">
				<!--音乐图标-->
				<!--<audio src="img/1.mp3" autoplay="autoplay"  loop=""></audio>-->
				<div class="music_logo music_zt">
					<img src="img/index/music_logo.png" />
				</div>
				<!--张裕金奖白兰地-->
				<div class="zyjjbld">
					<img src="img/index/zyjjbld.png" />
				</div>
				<!--你办喜事，我送喜酒-->
				<div class="nbxswsxj">
					<div class="ni"><img src="img/index/ni.png" /></div>
					<div class="ban"><img src="img/index/ban.png" /></div>
					<div class="xi"><img src="img/index/xi.png" /></div>
					<div class="shi"><img src="img/index/shi.png" /></div>
					<div class="wo"><img src="img/index/wo.png" /></div>
					<div class="song"><img src="img/index/song.png" /></div>
					<div class="xi2"><img src="img/index/xi.png" /></div>
					<div class="jiu"><img src="img/index/jiu.png" /></div>
				</div>
				<!--百年好合两瓶酒-->
				<div class="bainianhaohe">
					<img src="img/index/bainianhaohe.png" />
				</div>
				<!--定制我的喜宴，我要免费领喜酒-->
				<div class="xiyan">
					<img src="img/index/xiyan.png" />
					<div class="mask1"></div>
				</div>
				<div class="xijiu">
					<img src="img/index/xijiu.png" />
					<div class="mask1"></div>
				</div>
				<!--遮罩层部分-->
				<div class="index_zezhao">
					<div class="mask"></div>
					<div class="guize">
						<div class="guanbi">
							<div class="guanbi_x">
								<span>X</span>
							</div>
						</div>
						<p>定制专属囍宴</p>
						<p>邀请宾客入席</p>
						<p>抢999元现金大礼！</p>
						<div class="guize_content">
							<div class="guize_text">
								<p>查看活动规则</p>
							</div>
						</div>
					</div>
				</div>

			</div>
			<!--*************** 我要办喜宴 *******************-->
			<div class="content2">
				<div class="text_content">
					<h2>活动规则</h2>
					<p>在活动期间内，参与H5互动，只做自己喜欢的喜宴，并分享至朋友圈，邀请更多好友“入座”。六位好友入座即可组成一桌酒席，累计组成酒席最多的前99位用户，将获得999元的现金贺礼。此外，符合参与条件的用户凭借结婚证以及酒店婚宴预定单据，可获赠限量婚宴定制的喜酒套装一份，线下领取，先到先得。</p>
					<h2>参与条件</h2>
					<p>于2016年1月1日后进行婚配登记，并在2016年10月1日—10月7日举办婚宴的新人（限广东省、海南省区域）</p>
					<h2>活动时间</h2>
					<p>2016年9月8日—9月26日</p>
					<h2>奖品设置</h2>
					<p>1，第一名至99名，各获得￥999现金贺礼一份； 2，符合参与条件的用户凭借结婚证以及酒店婚宴预定单据，前往张裕白兰地线下兑换点（限广东省、海南省区域）可获赠婚宴定制喜酒套装一份，共99999份，数量有限，领完位置。
					</p>
					<h2>活动说明</h2>
					<p>1，活动奖品有限，在参与者提交认证资料正确无误的前提下，将按照事件顺序的原则确定获奖名单； 2，2016年9月30日将在张裕白兰地官方微信、微博平台以及喜宴排行榜公布中奖名单及领奖方式； 3，一个微型ID号智能参与一次； 4，如对本活动规则有任何疑问，活动主办方将会在法律允许的范围内对本活动规则给予必要的说明和解释。
					</p>
				</div>
				<div class="banxiyan">
					<img src="img/page2/banxiyan.png" />
				</div>
				<div class="xiaofangzi">
					<img src="img/page2/xiaofangzi_logo.png" />
				</div>
			</div>
			<!--*************** 生成喜宴,分享喜事 *******************-->
			
			<!--获奖名单-->
			<div class="mingdan">
				<div class="mingdan_content">
					<img src="img/huojiangmingdan/images/huojiangmingdan.png" />
				</div>
				<div class="mingdan_liebiao">
					<ul>
						<!--前三位带皇冠的-->
						<li>
							<span>1</span>
							<div class="huangguan">
								<img src="img/huojiangmingdan/no_1.png" />
							</div>
							<div class="touxiang">
							</div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>2</span>
							<div class="huangguan">
								<img src="img/huojiangmingdan/no_2.png" />
							</div>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>3</span>
							<div class="huangguan">
								<img src="img/huojiangmingdan/no_3.png" />
							</div>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<!--普通排名的-->
						<li>
							<span>4</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>5</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>6</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>7</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>8</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>9</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>10</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>11</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>12</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>13</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>14</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
						<li>
							<span>15</span>
							<div class="touxiang"></div>
							<span>XXXXXX</span>
							<span>30位宾客</span>
						</li>
					</ul>
				</div>
				<!--自己的位置-->
				<div class="ziji">
					<ul>
						<li>
							<span>100</span>
							<div class="touxiang2"></div>
							<span id="ziji_xxx">XXXXXX</span>
							<span>30位宾客</span>
						</li>
					</ul>
				</div>
				<div class="xiaofangzi3">
					<img src="img/page2/xiaofangzi_logo.png" />
				</div>
			</div>
			
			<!--填写喜宴主人信息-->
			<div class="tianxiexinxi">
				<div class="tianxie_content">
					<p>填写喜宴主人信息</p>
					<div class="tianxie_part">
						<ul>
							<li>
								<p>真实姓名</p>
								<input type="text" />
							</li>
							<li>
								<p>联系电话</p>
								<input type="text" />
							</li>
							<li>
								<p>喜宴举办地点</p>
								<input type="text" />
							</li>
							<li>
								<p>喜宴举办日期</p>
								<input type="text" />
							</li>
						</ul>
						<div class="row_xian"></div>
					</div>
					<div class="bottom_text">
						<p>只有于2016年1月1日后进行婚配登记</p>
						<p>并在2016年10月1日———10月7日举办婚礼的新人</p>
						<p>(限广东省、海南省区域)才能入榜噢！</p>
					</div>
					<div class="tijiao_btn">
						<img src="img/images/tijiao_btn_03.png"/>
					</div>
					
				</div>
				<!--提交成功弹窗-->
					<div class="tijiaotanchuang">
						<div class="tijiao_content">
							<div class="guanbi_tijiao">
								<div class="tijiao_x">
									<span>X</span>
								</div>
							</div>
							<p>提交成功</p>
							<div class="tijiao_chakan">
								<p>查看喜宴排行榜</p>
							</div>
						</div>
					</div>
			</div>
			
			
			<div class="b2_page1">
				<div class="weizhi">
					<img src="img/btn2_page1/qiehuan.png" />
				</div>

				<div class="ditu">
					<div class="ditu_img">
						<img src="img/btn2_page1/ditu.png" />
					</div>
					<div class="dinwei1">
						<img src="img/btn2_page1/dinwei.png" />
						<div class="dinwei_word1">
							已领取<span>23</span>份
						</div>
					</div>
					<div class="dinwei2">
						<img src="img/btn2_page1/dinwei.png" />
						<div class="dinwei_word1">
							已领取<span>10</span>份
						</div>
					</div>
				</div>

				<div class="word_cet">
					<p>剩余<span>9998</span>套</p>
					<div class="word_bot">
						<img src="img/btn2_page1/images/word_cet_03.png" />
					</div>
				</div>

				<div class="lq_word">
					<ul>
						<li>

							<h3>领取方式：</h3>
							<p>符合领取条件的用户凭结婚证已经酒店婚宴预定单据，前往张裕白兰地线下兑换点（限广东省，海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止。</p>

						</li>
						<li>

							<h3>领取时间：</h3>
							<p>2016年9月9日——10月29日</p>

						</li>
						<li>

							<h3>领取条件：</h3>
							<p>于2016年1月1日后进行婚姻登记，并在2016年9月9日——10月29日举办婚宴的新人（限广东省，海南省区域）</p>

						</li>
					</ul>
				</div>

				<div class="find_btn">
					<img src="img/btn2_page1/find_btn.png" />
				</div>

				<div class="home_btn">
					<img src="img/btn2_page1/home.png" />
				</div>
			</div>
			<div class="b2_page2">
				<div class="weizhi">
					<img src="img/btn2_page1/qiehuan2.png" />
				</div>

				<div class="ditu">
					<div class="ditu_img">
						<img src="img/btn2_page1/ditu2.png" />
					</div>
					<div class="dinwei1">
						<img src="img/btn2_page1/dinwei.png" />
						<div class="dinwei_word1">
							已领取<span>23</span>份
						</div>
					</div>
					<div class="dinwei2">
						<img src="img/btn2_page1/dinwei.png" />
						<div class="dinwei_word1">
							已领取<span>10</span>份
						</div>
					</div>
					<div class="dinwei3">
						<img src="img/btn2_page1/dinwei.png" />
						<div class="dinwei_word1">
							已领取<span>56</span>份
						</div>
					</div>
				</div>

				<div class="word_cet">
					<p>剩余<span>9998</span>套</p>
					<div class="word_bot">
						<img src="img/btn2_page1/images/word_cet_03.png" />
					</div>
				</div>

				<div class="lq_word">
					<ul>
						<li>

							<h3>领取方式：</h3>
							<p>符合领取条件的用户凭结婚证已经酒店婚宴预定单据，前往张裕白兰地线下兑换点（限广东省，海南省区域）可获赠婚宴定制囍酒套装一份，共9999份，数量有限，领完为止。</p>

						</li>
						<li>

							<h3>领取时间：</h3>
							<p>2016年9月9日——10月29日</p>

						</li>
						<li>

							<h3>领取条件：</h3>
							<p>于2016年1月1日后进行婚姻登记，并在2016年9月9日——10月29日举办婚宴的新人（限广东省，海南省区域）</p>

						</li>
					</ul>
				</div>

				<div class="find_btn">
					<img src="img/btn2_page1/find_btn.png" />
				</div>

				<div class="home_btn">
					<img src="img/btn2_page1/home.png" />
				</div>
			</div>

			<div class="b2_page3">
				<div class="map" id="container"></div>
				<!--<div id="tip"></div>-->
				<div class="map_bot">
					<img src="img/btn2_page1/map_bot.png" />
				</div>
				<div class="home_btn">
					<img src="img/btn2_page1/home.png" />
				</div>
			</div>
			
			<div class="crt_zhuozi">
				<div class="xy_title">
					____家的囍宴
				</div>
				
				<div class="content">
					<div class="zbz czz" index="1">
						<div class="cet_zhuo">
							<p>主宾桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz czz" index="2">
						<div class="cet_zhuo">
							<p>第一桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz czz" index="3">
						<div class="cet_zhuo">
							<p>第二桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz czz" index="4">
						<div class="cet_zhuo">
							<p>第三桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz czz" index="5">
						<div class="cet_zhuo">
							<p>第四桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz czz" index="5">
						<div class="cet_zhuo">
							<p>第五桌</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
					<div class="kz tjz">
						<div class="cet_zhuo">
							<p>+</p>
						</div>
						<div class="xzhuo xzhuo1">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo2">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo3">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo4">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo5">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
						<div class="xzhuo xzhuo6">
							<img src="img/btn2_page1/images/xiaozhuo_03.png"/>
						</div>
					</div>
				</div>
				
				<div class="scxy_btn">
					<img src="img/btn2_page1/shengchengxy.png"/>
				</div>
				
				<div class="home_btn">
					<img src="img/btn2_page1/home.png" />
				</div>
				
				<!--欢迎来到___的喜宴-->
				<div class="huanyingtanchuang">
					<div class="huanying_content">
						<div class="guanbi_huanying">
							<div class="yaoqing_x">
								<span>X</span>
							</div>
						</div>
						<div class="huanying_text">
							<p>欢迎来到______的喜宴</p>
						</div>
						<div class="woyaoruxi">
							<p>我要入席</p>
						</div>
						<div class="chakan">
							<p>查看喜宴排行榜</p>
						</div>
						<div class="zhizuo">
							<p>制作我的喜宴</p>
						</div>
					</div>
				</div>
				<!--宴席已经摆好了，快邀请朋友r入席！-->
				<div class="zuoxitanchuang">
					<div class="yaoqin">
						<div class="yaoqin_gunbi">
							<div class="yaoqin_x">
								<span>X</span>
							</div>
						</div>
						<p>宴席摆好了，</p>
						<p>快邀请朋友入席！</p>
					</div>
				</div>
			</div>
		</div>
		
	</body>
	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.transit.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ditu.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/ruzuo.js" type="text/javascript" charset="utf-8"></script>

</html>